import Taro from "@tarojs/taro";
import {useState} from "react";
import {AtButton, AtForm, AtInput, AtTextarea, AtCheckbox, AtList, AtListItem} from "taro-ui";
import {Picker, View} from "@tarojs/components";
import {TREATMENTS, API_URL} from "@/config";
import styles from './index.module.scss';

export default function (){

  const [patientName, setPatientName] = useState('');
  const [bedId, setBedId] = useState('');
  // const [phone, setPhone] = useState('111');
  const [cureList, setCureList] = useState<string[]>([]);
  const [remark, setRemark] = useState('');
  const [installationTime, setInstallationTime] = useState('');
  const [expirationTime, setExpirationTime] = useState('');
  const [dressingTime, setDressingTime] = useState('');

  async function onSubmit(form){
    if(!patientName || !bedId){
      Taro.showToast({title:'请填写名称和床号', icon:'none'});
      return;
    }

    try{
      Taro.showLoading();
      const data: any = {bedId, patientName, phoneNo: '111'};
      data.treatmentIds = cureList.map(value => value).join(',');
      if (remark) data.remark = remark;
      if (installationTime) data.installationTime = installationTime;
      if (dressingTime) data.dressingTime = dressingTime;
      if (expirationTime) data.expirationTime = expirationTime;
      const res = await Taro.request({
        url: API_URL+'/Create',
        method:'POST',
        data,
      });
      Taro.hideLoading();
      if(res.data.data){
        Taro.showToast({title:'提交成功', icon:'none', duration: 1000});
        setTimeout(()=>Taro.navigateBack({delta: 1}), 1000);
      }else{
        Taro.showToast({title:res.data.message || '提交失败', icon:'none', duration: 1000});
      }
    }catch(e){
      Taro.hideLoading();
      console.log(e);
    }
  }

  return (
    <View className={styles.infoWrapper}>
      <AtForm
        onSubmit={onSubmit}
      >
        <AtInput
          name='bedId'
          title='床号'
          type='number'
          placeholder='请输入床号'
          value={bedId}
          onChange={(value: string) => setBedId(value)}
          required
        />
        <AtInput
          name='patientName'
          title='姓名'
          type='text'
          placeholder='请输入姓名'
          value={patientName}
          onChange={(value: string) => setPatientName(value)}
          required
        />
        {/*<AtInput*/}
        {/*  name='value'*/}
        {/*  title='手机号'*/}
        {/*  type='text'*/}
        {/*  placeholder='请输入手机号'*/}
        {/*  value={phone}*/}
        {/*  onChange={(value: string) => setPhone(value)}*/}
        {/*  required*/}
        {/*/>*/}
        <h5 className={styles.title}>治疗选项:</h5>
        <AtCheckbox
          options={TREATMENTS.slice(1)}
          selectedList={cureList}
          onChange={(value: string[]) => setCureList(value)}
        />
        <AtTextarea
          name='remark'
          title='注意事项'
          type='text'
          placeholder='请填写注意事项'
          value={remark}
          onChange={(value: string) => setRemark(value)}
        />
        <h5 className={styles.title}>管道信息:</h5>
        <Picker mode='date' onChange={(e) => setInstallationTime(e.detail.value)}>
          <AtList>
            <AtListItem title='安装时间' extraText={installationTime} />
          </AtList>
        </Picker>
        <Picker mode='date' onChange={(e) => setDressingTime(e.detail.value)}>
          <AtList>
            <AtListItem title='换药时间' extraText={dressingTime} />
          </AtList>
        </Picker>
        <Picker mode='date' onChange={(e) => setExpirationTime(e.detail.value)}>
          <AtList>
            <AtListItem title='到期时间' extraText={expirationTime} />
          </AtList>
        </Picker>
        {/*<Picker mode='date' onChange={(e) => setInstallationTime(e.detail.value)}>*/}
        {/*  <AtList>*/}
        {/*    <AtListItem title='入院时间' extraText={installationTime} />*/}
        {/*  </AtList>*/}
        {/*</Picker>*/}
        <View className={styles.btnWrapper}>
          <AtButton formType='submit' type='primary'>提交</AtButton>
        </View>
      </AtForm>
    </View>
  );
}
